<template>
  <div class="userAdd">
    <el-page-header title="产品管理" content="修改产品" @back="goBack" />

    <el-form
      ref="productFormRef"
      style="max-width: 600px"
      :model="productForm"
      status-icon
      :rules="productFormRules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="产品名称" prop="title">
        <el-input v-model="productForm.title" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="产品简要描述" prop="introduction">
        <el-input
          v-model="productForm.introduction"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="产品详细描述" prop="detail">
        <el-input
          v-model="productForm.detail"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="产品图片" prop="cover">
        <Upload :avatar="productForm.cover" @zxychange="handleAvatar" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitEditProduct">
          修改产品
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import store from "@/store/index";
import { useRouter, useRoute } from "vue-router";
import { computed, ref, reactive,onMounted } from "vue";
const productFormRef = ref();
import Upload from "@/components/upload/Upload.vue";
import upload from "@/util/upload";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
import request from "@/util/request"

const productForm = reactive({
  title: "",
  introduction: "",
  detail: "",
  cover: "",
  file: null,
});

// 用户表单规则
const productFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  introduction: [
    { required: true, message: "请输入简要描述", trigger: "blur" },
  ],
  detail: [{ required: true, message: "请输入详细描述" }],
  cover: [{ required: true, message: "请上传产品图片", trigger: "blur" }],
});

const handleAvatar = (file) => {
  productForm.cover = URL.createObjectURL(file);
  productForm.file = file; //把头像的原生对象添加到提交表单数据中
};

const getTableData = async () => {
  let res = await request.get(`/adminapi/product/productList/${route.params.id}`);
  // 因为hotsForm值是reactive,不能直接复制,使用Object.assign
  Object.assign(productForm, res.data.data[0]);
};

// 获取当前的编辑新闻,进行数据回填
onMounted(async () => {
  await getTableData();
});

// 返回上一页
const goBack =()=>{
  router.back();
}


// 修改产品
const submitEditProduct = () => {
  productFormRef.value.validate(async (valid) => {
    if (valid) {
      // 提交数据给后端
      console.log(productForm);
      const res = await upload("/adminapi/product/editProduct", productForm);
      if (res.data.ActionType === "OK") {
        ElMessage.success("修改成功");
        // 修改成功,跳转到列表页
        router.push("/product-manage/productList");
      }
    }
  });
};
</script>

<style scoped lang="scss">
.userAdd {
  width: 100%;
  height: 100vh;
  .el-form {
    max-width: 1200px !important;
    margin-top: 50px !important;
  }
  .card {
    width: 100%;
    margin-top: 30px;
    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}

::v-deep .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar {
  width: 178px;
  height: 178px;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
